<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10.13 课后作业 08</title>
    <style>
        * {
            text-align: center;
        }
        
        #div1 button {
            width: 100px;
            height: 30px;
            background-color: greenyellow;
            border-radius: 10%;
        }
        
        .style {
            background-color: aqua;
            width: 600px;
            height: 450px;
        }
        
        .style1 img {
            width: 300px;
            height: 270px;
            border-radius: 30%;
        }
        
        .myStyle {
            background-color: bisque;
            width: 650px;
            height: 500px;
        }
        
        .myStyle img {
            width: 310px;
            height: 280px;
            border-radius: 30%;
            src: url("../Images/image3.png");
        }
        
        .myFont {
            font-size: smaller
        }
        
        .myFont1 {
            color: blueviolet;
        }
        
        .myFont2 {
            font-style: italic;
        }
    </style>
</head>

<body>
    <div id="div" class="style style1">
        <h2>样式变幻</h2>
        <p>这是演示文字</p>
        <div id="div1" style="width: 600px;height: 320px;">
            <img src="../Images/image1.png">
        </div>
        <div id="div1">
            <button id="button1">更改图片背景</button>
            <button id="button2">一键更改背景</button>
            <button id="button3">添加字体样式</button>
            <button id="button4">移除大小样式</button>
        </div>
    </div>

    <script>
        let div = document.getElementById("div")
        let p = document.getElementsByTagName("p")[0]
        let button1 = document.getElementById("button1")
        let button2 = document.getElementById("button2")
        let button3 = document.getElementById("button3")
        let button4 = document.getElementById("button4")

        button1.onclick = () => {
            let img = document.getElementsByTagName("img")[0]
            img.src = "../Images/image2.png"
        }
        button2.addEventListener("click", () => {
            div.className = "myStyle"
        })
        button3.addEventListener("click", () => {
            p.classList.add("myFont", "myFont1", "myFont2")
        })
        button4.addEventListener("click", () => {
            p.classList.remove("myFont")
        })
    </script>
</body>

</html>